<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"></div>
          <div style="float: right">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleUser">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="userExit">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>资源区
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>网站推荐
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>闲聊区
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-user"></Icon>个人信息
            </MenuItem>
          </div> -->
        </Menu>
      </Header>
      <Layout :style="{padding: '0 50px'}">
        <Breadcrumb :style="{margin: '16px 0'}">
          <BreadcrumbItem>欢迎来到资源共享平台</BreadcrumbItem>
          <!-- <BreadcrumbItem>Components</BreadcrumbItem>
          <BreadcrumbItem>Layout</BreadcrumbItem> -->
        </Breadcrumb>
        <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
          <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
              <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                <Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-navigate" to="/resources"></Icon>资源区
                  </template>
                  <MenuItem name="1-1" to="/resources">资源管理</MenuItem>
                  <MenuItem name="1-2" to="/category">类型管理</MenuItem>
                  <!-- <MenuItem name="1-2" to="/upload">资源上传</MenuItem> -->
                  <!-- <MenuItem name="1-3">Option 3</MenuItem> -->
                </Submenu>
                <Submenu name="2">
                  <template slot="title">
                    <Icon type="ios-keypad" to="/tourist"></Icon>用户管理区
                  </template>
                  <MenuItem name="2-1" to="/tourist">用户管理</MenuItem>
                  <!-- <template slot="title">
                    <Icon type="ios-keypad" to="/study"></Icon>网站推荐
                  </template>
                  <MenuItem name="2-1" to="/study">学习网站</MenuItem>
                  <MenuItem name="2-2" to="/material">素材网站</MenuItem> -->
                </Submenu>
                <Submenu name="3">
                  <template slot="title">
                    <Icon type="ios-analytics" to="/comment"></Icon>评论管理区
                  </template>
                  <MenuItem name="3-1" to="/comment">评论审核</MenuItem>
                </Submenu>
                <!-- <Submenu name="3">
                  <template slot="title">
                    <Icon type="ios-analytics" to="/talk"></Icon>闲聊区
                  </template>
                  <MenuItem name="3-1" to="talk">广场</MenuItem> -->
                  <!-- <MenuItem name="3-2">发帖</MenuItem> -->
                <!-- </Submenu> -->
                <Submenu name="4">
                    <template slot="title">
                        <Icon type="ios-user" to="/web"></Icon>网站推荐区
                    </template>
                    <MenuItem name="4-1" to="/web">网站管理</MenuItem>
                </Submenu>
                <Submenu name="5">
                    <template slot="title">
                        <Icon type="ios-user" to="/adminpwd"></Icon>密码修改
                    </template>
                    <MenuItem name="5-1" to="/adminpwd">密码修改</MenuItem>
                </Submenu>
              </Menu>
            </Sider>
            <!-- <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}"><router-view></router-view></Content> -->
            <Layout :style="{padding: '0 24px 24px'}">
          <router-view></router-view>
        </Layout>
          </Layout>
        </Content>
      </Layout>
      <Footer class="layout-footer-center">2020 &copy; IU</Footer>
    </Layout>
  </div>
</template>

<script>
// import { userLogout } from '../api/user'
export default {
  data () {
    return {
      // circleUrl: '../assets/image/banner.jpg'
    }
  },
  methods: {
    handleUser () {
      this.$router.push('/adminpwd')
    },
    userExit () {
      this.$confirm('确定退出系统？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        window.sessionStorage.clear()
        this.$message({
          type: 'success',
          message: '退出成功'
        })
        this.$router.push('/login')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
      // data = JSON.parse(sessionStorage.getItem("datainfo"))
      // userLogout()
    }
  }
}
</script>
<style lang="scss" scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    background-image: url("../assets/logo.png");
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
</style>
